<template>
<div class="icons">
    <swiper >
        <swiper-slide>
            <div class="icon"  v-for="item in list" :key="item.id">
                 <div class="icon-imgdiv" >
                    <img class="icon-img" :src="item.imgUrl" >
                    <p class="imgfont">{{item.desc}}</p>
                </div>
            </div>
        </swiper-slide>
    </swiper>   
</div>
</template>

<script>
export default {
  name: 'homeicons',
  props:{
      list:Array,
  }

  /*   computed: {
        pages(){
            const pages = []
            this.iconlists.forEach((item,index) => {
            const page=Math.floor(index/8)
            pages[page].push(item) })
            return pages
        }
    } */
}
</script>

<style scoped>

    .icons>>>.swiper-container{
        height: 0;
        padding-bottom: 50%;
     
    }
    .icon{
        position: relative;
        overflow: hidden;
        float: left;
        height: 0;
        width: 25%;
        padding-bottom: 25%;
    
    }
    .icon-imgdiv{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: .54rem;
     
    }
    .icon-img{
        display: block;
        margin: auto ;
        height: 100%;
        padding-top: .1rem;
    }
    .imgfont{
        color: #333;
        margin: auto;
        text-align: center;
        height: .3rem;
        padding-top:.1rem;
    /*  给多余的文字出现...的样式  
    clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。 
    ellipsis： 当对象内文本溢出时显示省略标记（...）。*/
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;  
    }
</style>